<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <!-- custom -->
    <link rel='stylesheet' href='/stylesheets/style.css'>
  </head>
  <body>
    <div class="layout-header">
      <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Example table</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/tabledit">Tabledit</a></li>
                    <li class=""><a href="/bootstrapTable">Bootstrap-table</a></li>
                    <li class=""><a href="/datatables">Datatables</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
      </nav>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <table class="table table-bordered table-striped">
            <tr>
                <th>#</th>
                <th>公司</th>
                <th>地点</th>
                <th>负责人</th>
                <th>人员数</th>
                <th>备注</th>
            </tr>
            <% for(var i = 0 ; i < dataList.length; i++){ %>
              <tr>
                <td class="hidden"><%= dataList[i].id %></td>
                <td><%= i+1 %></td>
                <td><%= dataList[i].plant %></td>
                <td><%= dataList[i].place %></td>
                <td><%= dataList[i].owner %></td>
                <td><%= dataList[i].preparation %></td>
                <td><%= dataList[i].bz %></td>
              </tr>
            <% } %>
          </table>
        </div>
      </div>
    </div>

    <!-- jQuery 3 -->
    <script src="/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- tabledit -->
    <script src="/javascripts/libs/jquery.tabledit.js"></script>
    <script>
      $(function(){
        $('.table').Tabledit({
          url: '/tabledit/ajax',
          autoFocus: false,
          // groupClass: 'btn-group btn-group-xs',
          // inputClass: 'form-control input-sm',   // input 最小只能到sm了
          // hideIdentifier: true,   // 手动设置hidden 取代 hideIndentifier
          buttons: {
            edit:{
              // html: '<span class="glyphicon glyphicon-pencil"></span>',
              action: 'edit'
            },
            delete: {
              // html: '<span class="glyphicon glyphicon-trash"></span>',
              action: 'delete'
            },
            confirm: {
              html: '确定?'
            },
            restore: {
              html: '取消',
            },
            save: {
              html: '保存?'
            }
          },
          columns: {
              identifier: [0, 'table_id'],  //  列从0开始，id是table的第2列
              editable: [[2, 'table_plant'],[3, 'table_place'], [4, 'table_owner'],[5, 'table_preparation'],[6, 'table_bz']]
          },
          onDraw: function() {
              console.log('onDraw()');
          },
          onAjax: function(action, serialize) {
              console.log('onAjax(action, serialize)');
              console.log(action);
              console.log(serialize);
          },
          onSuccess: function(data, textStatus, jqXHR) {
              console.log('onSuccess(data, textStatus, jqXHR)');
              console.log(data);
              console.log(textStatus);
              console.log(jqXHR);
          },
          onFail: function(jqXHR, textStatus, errorThrown) {
              console.log('onFail(jqXHR, textStatus, errorThrown)');
              console.log(jqXHR);
              console.log(textStatus);
              console.log(errorThrown);
          },
          onAlways: function() {
              console.log('onAlways()');
          }
        });
      });
    </script>
  </body>
</html>
